import {memo} from 'react';
import {StyleSheet, TouchableOpacity, View} from 'react-native';
import {
  contentType,
  dpw10,
  dpw12,
  dpw14,
  dpw16,
  dpw20,
  dpw22,
  dpw220,
  dpw30,
  dpw4,
  dpw6,
  dpw8,
  dpw92,
} from '../../constants';
import {
  Img,
  LinearGradient,
  ObserverButton,
  ObserverText,
  ObserverView,
} from '../../components';
import {HeaderProps} from '.';
import {dight} from '../../utils';
import {SvgAdd, SvgFire} from '../../components/svg';

const Header = (
  props: Partial<HeaderProps> & {toPay: any; onSigin: any; foucs: boolean},
) => {
  const {
    Title = '',
    Description = '',
    ReadCount = 0,
    FocusCount = 0,
    ExtensionUrl,
    Type = 1,
    Tags = '',
    foucs,
    toPay,
    onSigin,
  } = props;

  return (
    <ObserverView
      style={{borderBottomWidth: 1, paddingBottom: dpw8}}
      themeStyle={{borderColor: 'color_9'}}>
      <View>
        <Img url={ExtensionUrl} style={styles.img} borderRadius={0} />
        <View style={styles.title}>
          <LinearGradient themeColors={['color_24', 'color_29']}>
            <View
              style={{
                ...styles.hh,
                justifyContent: 'space-between',
                paddingHorizontal: dpw16,
                paddingVertical: dpw8,
              }}>
              <View style={{flex: 1, marginRight: dpw92}}>
                <ObserverText
                  tKey={Title}
                  type="head-t"
                  numberOfLines={1}
                  ellipsizeMode="tail"
                />
                <View style={styles.hh}>
                  <ObserverText
                    before={
                      <View style={{paddingRight: dpw4}}>
                        <SvgFire />
                      </View>
                    }
                    tKey="hotNum"
                    tOptions={{number: dight(ReadCount)}}
                    colorType="text-4"
                  />
                  <ObserverText
                    style={{marginHorizontal: dpw8}}
                    tKey="|"
                    colorType="text-4"
                  />
                  <ObserverText
                    tKey="attention"
                    tOptions={{number: dight(FocusCount)}}
                    colorType="text-4"
                  />
                </View>
              </View>
              <ObserverButton
                style={styles.btn}
                tKey={foucs ? 'hasFocus' : 'focus'}
                themeStyle={{backgroundColor: foucs ? 'color_44' : 'color_1'}}
                type="primary"
                before={
                  foucs ? null : (
                    <View style={{paddingRight: dpw4}}>
                      <SvgAdd />
                    </View>
                  )
                }
                onPress={onSigin}
              />
            </View>
          </LinearGradient>
        </View>
      </View>
      <ObserverView
        style={{
          paddingHorizontal: dpw16,
          paddingVertical: dpw6,
          flexDirection: 'row',
          justifyContent: 'space-between',
        }}
        themeStyle={{backgroundColor: 'color_12'}}>
        <View style={{flexDirection: 'row'}}>
          <LinearGradient themeColors={['color_45', 'color_1']}>
            <ObserverText
              style={{paddingHorizontal: dpw4}}
              tKey="vipMember"
              tOptions={{number: dight(FocusCount)}}
              colorType="text-4"
            />
          </LinearGradient>
          <ObserverText style={{marginLeft: dpw8}} tKey="freeViewAllVip" />
        </View>
        <TouchableOpacity onPress={toPay}>
          <ObserverText tKey="openMember" type="primary" />
        </TouchableOpacity>
      </ObserverView>
      <View
        style={{
          ...styles.hh,
          marginHorizontal: dpw16,
          marginVertical: dpw12,
          flexWrap: 'wrap',
        }}>
        <ObserverText
          tKey={contentType[`k${Type}` as 'k1' | 'k2']}
          type="tag-2"
        />
        {Tags &&
          Tags.split(',').map((tag, i) => (
            <ObserverText
              style={{marginLeft: dpw6}}
              key={i}
              tKey={`#${tag}`}
              type="tag-1"
            />
          ))}
      </View>
      <ObserverText
        style={{marginHorizontal: dpw16}}
        tKey={Description}
        type="desc"
      />
    </ObserverView>
  );
};

export default memo(Header);

const styles = StyleSheet.create({
  img: {
    height: dpw220,
  },
  title: {
    position: 'absolute',
    zIndex: 1,
    bottom: 0,
    width: '100%',
  },
  hh: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  btn: {
    flexDirection: 'row',
    paddingVertical: 2,
    paddingHorizontal: dpw10,
    borderRadius: dpw30,
    fontSize: dpw14,
    lineHeight: dpw22,
  },
});
